<!-- src/components/Icon.vue -->
<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  name: String
})

// 完整的Unicode符号映射
const icons = {
  // 基础图标

  homefilled: '📋', // 仪表盘
  document: '📄',   // 文档
  user: '👤',      // 用户
  setting: '⚙',    // 设置
  chevron: '›',    // 右箭头
  chatlineround:'🤖',        // AI
  key: '🔑',      // 权限
  officebuilding: '🏢', // 部门
  menu: '≡',       // 菜单
  avatar: '👑',      // 角色
  persional: '👤',      // 个人中心
  chat:'💬',
  // 备用默认图标
  default: '◯'    // 默认图标
}

// 获取图标，如果找不到则返回默认图标
const getIcon = (name) => {
  if (!name) return icons.default

  // 标准化处理，与authStore中的保持一致
  const normalized = name.toString()
      .toLowerCase()
      .replace(/^icon-?/, '')
      .replace(/-?icon$/, '')
      .replace(/\s+/g, '-')
      .trim()

  return icons[normalized] || icons.default
}
</script>

<template>
  <span class="icon-symbol">{{ getIcon(name) }}</span>
</template>

<style scoped>
.icon-symbol {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
</style>